<template>
    <div style="display: flex; justify-content: center; background-color: #fff;">
        <div style="width: 755px">
            <div>
                <div>
                    <img src="/src/assets/ruby/welcome-chinese.png" alt="" width="100%">
                </div>
                <div style="border: 1px solid #cccccc; margin-top: 50px;">
                    <div>
                        <div
                            style="padding-left: 30px; font-size: 18px; font-weight: 800;height: 50px; line-height: 50px;background-color: #FBFBFB;">
                            Login</div>
                        <div style="display: flex; justify-content: center;">
                            <div class="bty-login-content">
                                <input type="text" style="width: 200px;" v-model="loginInfo.username">
                                <span>UserName *：</span>
                                <div style="margin-bottom: 20px;">
                                    <br>
                                </div>
                                <input type="password" style="width: 200px;" v-model="loginInfo.password">
                                <span>Password *：</span>
                                <div style="margin-bottom: 20px;">
                                    <br>
                                </div>
                                <input type="text" style="width: 200px;" v-model="loginInfo.verify" @keydown.enter="onSubmit">
                                <span>VerificationCode *：</span>
                            </div>
                        </div>
                        <div style="height: 40px; height: 50px; text-align: center;">
                            <VerificationCode />
                        </div>
                        <div style="text-align: center;margin-bottom: 10px;">
                            <el-button type="primary" round @click="onSubmit">Login</el-button>
                        </div>
                    </div>
                    <div></div>

                    <div class="bty-login-note">
                        <span>{{ errMessage }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import {login} from '@/requests/index';
import VerificationCode from '@/views/VerificationCode.vue';
const router = useRouter();
const loginInfo = reactive({
  username: "",
  password: "",
  verify: ""
});
const errMessage = ref();

const onSubmit = async()=>{
    const verify = window.localStorage.getItem('verify');
    if (verify !== loginInfo.verify ) {
        errMessage.value = "The verification code is incorrect";
        return;
    };
    const res = await login(loginInfo);
    if (res.status === 2000){
        console.log(res)
        window.localStorage.setItem("token", res.data.token);
        window.localStorage.setItem("username", res.data.user_info.username);
        router.push({path: '/en/home'});
        setTimeout(() => {
            window.location.reload();
        }, 100);
      } else {
        errMessage.value = "Wrong username or password";
      }
}
</script>

<style scoped>
:deep(.el-input__inner) {
    border: 1px solid #e9eef3;
}

.bty-login-content {
    margin-top: 20px;
}

.bty-login-content>span,
input {
    float: right;
}


.bty-login-note {
    text-align: center;
    color: rgb(238, 87, 87);
    margin-bottom: 50px;
}
</style>